<template>
	<view class="box">
		<u-navbar  left-icon-color="white" :autoBack="true" :titleStyle="{color:'white'}" bgColor="transparent"
			:placeholder="true"></u-navbar>
		<view class="header">
			<image src="http://qiniuapplet.jiachuangnet.com/title.png" mode="" style="width: 750rpx;height: 70rpx;"></image>
		</view>
		<view class="pick_date floor flex">
			<image src="http://qiniuapplet.jiachuangnet.com/timer.png" mode="" style="width: 67rpx;height: 54rpx;margin-right:20rpx;"></image>
			<view class="btn-start">
				<u-button @click="showStart = true" :text="start?start:'开始时间'" plain></u-button>
			</view>
			<text style="margin: 0 20rpx;display: flex;align-items: center;color: #00EAFF;">-</text>
			<view class="btn-end">
				<u-button @click="showEnd = true" :text="end?end:'结束时间'" plain></u-button>
			</view>
			<view class="search" @click="search">
				<text>搜索</text>
			</view>
		</view>
		<view class="pick_add floor flex" @click="showWarehouse=true">
			<text style="font-size: 30rpx;color: #00EAFF;">{{warehouse?warehouse[0]:'选择仓库'}}</text>
			<u-icon name="arrow-right" color="#00EAFF;" size="20"></u-icon>
		</view>
		<view class="data_count floor">
			<view class="title">
				<text>数据总计</text>
			</view>
			<view class="data_wrapper">
				<view class="data_item">
					<text class="data_title">订单总数</text>
					<u-count-to :startVal="0" :endVal="dataCount.orderCount" separator="," :duration="2000"  color="#19F5FF" fontSize="18"></u-count-to>
					<!-- <text class="data_num">{{dataCount.orderCount}}</text> -->
				</view>
				<view class="data_item">
					<text class="data_title">销售金额</text>
					<u-count-to :startVal="0" :decimals="2" :endVal="dataCount.saleMoney" separator="," :duration="2000"  color="#19F5FF" fontSize="18"></u-count-to>
				</view>
				<view class="data_item">
					<text class="data_title">售后总数</text>
					<u-count-to :startVal="0" :endVal="dataCount.afterCount" separator="," :duration="2000"  color="#19F5FF" fontSize="18"></u-count-to>
				</view>
				<view class="data_item">
					<text class="data_title">售后金额</text>
					<u-count-to :startVal="0" :decimals="2" separator="," :endVal="dataCount.afterMoney" :duration="2000"  color="#19F5FF" fontSize="18"></u-count-to>
				</view>
				<view class="data_item">
					<text class="data_title">品牌方台账</text>
					<u-count-to :startVal="0" :decimals="2" separator="," :endVal="dataCount.brandBookMoney" :duration="2000"  color="#19F5FF" fontSize="18"></u-count-to>
				</view>
				<view class="data_item">
					<text class="data_title">仓库台账</text>
					<u-count-to :startVal="0" :decimals="2" separator="," :endVal="dataCount.areaBookMoney" :duration="2000"  color="#19F5FF" fontSize="18"></u-count-to>
				</view>
			</view>
		</view>
		<view class="newOrderAmount floor">
			<view class="title">
				<text>新店销售额</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts 
				      type="line"
				      :opts="opts1"
				      :chartData="chartData1"
					  :canvas2d="true"
					  canvas-id="line1"
				    />
			</view>
		</view>
		<view class="newOrderAmount floor">
			<view class="title">
				<text>老店销售额</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts 
				      type="line"
				      :opts="opts1"
				      :chartData="chartData2"
					  :canvas2d="true"
					  canvas-id="line2"
				    />
			</view>
		</view>
		<view class="newOrderAmount floor">
			<view class="title flex">
				<text>门店数量</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts 
				      type="column"
				      :opts="opts3"
				      :chartData="chartData5"
					  :canvas2d="true"
					  canvas-id="column5"
				    />
			</view>
		</view>
		<view class="newOrderAmount floor">
			<view class="title flex">
				<text>仓库发货门店数</text>
				<view class="select_input flex" @click="checkType">
					<text style="margin-right: 10rpx;">{{orderType===1?'新增店铺':'老店升级'}}</text>
					<u-icon name="arrow-down-fill" color="#19f5ff" size="18"></u-icon>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts 
				      type="column"
				      :opts="opts3"
				      :chartData="chartData3"
					  :canvas2d="true"
					  canvas-id="column3"
				    />
			</view>
		</view>
		<view class="newOrderAmount floor floor4">
			<view class="title flex">
				<text>售后类型</text>
			</view>
			<view class="charts-box charts-box4" >
				<qiun-data-charts 
				      type="ring"
				      :opts="opts4"
				      :chartData="chartData4"
					  :canvas2d="true"
					  canvas-id="ring4"
				    />
			</view>
		</view>
		<u-datetime-picker
		        :show="showStart"
		        v-model="timeStart"
		        mode="date"
				@confirm="confirmStart"
				@cancel="showStart=false"
		></u-datetime-picker>
		<u-datetime-picker
		        :show="showEnd"
		        v-model="timeEnd"
		        mode="date"
				@confirm="confirmEnd"
				@cancel="showEnd=false"
		></u-datetime-picker>
		<u-picker :show="showWarehouse" :columns="columns" @cancel="showWarehouse=false" @confirm="confirmWarehouse"></u-picker>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				dataCount:{},
				showStart: false,
				showEnd:false,
				showWarehouse:false,
				timeStart: Number(new Date()),
				timeEnd: Number(new Date()),
				start:"",
				end:"",
				warehouse:null,
				warehouseList:[],
				columns: [],
				chartData1: {},
				chartData2: {},
				chartData3: {},
				chartData4: {},
				chartData5:{},
				orderType:1,
				opts4: {
						title:{
							name:'',
							
						},
						fontColor:'#A6CDFF',
				        rotate: false,
				        rotateLock: false,
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [5,5,5,5],
				        dataLabel: true,
				        enableScroll: false,
				        legend: {
				          show: true,
				          position: "bottom",
				          lineHeight: 25
				        },
				        subtitle: {
				          name: '',
				        },
				        extra: {
				          ring: {
				            ringWidth: 20,
				            activeOpacity: 0.5,
				            activeRadius: 10,
				            labelWidth: 15,
				            border: true,
				            borderWidth: 3,
				            borderColor: "#0c172d",
							centerColor:"#0c172d",
							linearType:"#14bbcc"
				          },
						  tooltip:{
							  showBox:true
						  }
				        }
				      },
				opts1: {
				        color: ["#1890FF"],
				        padding: [30,10,15,0],
				        dataLabel: false,
						dataPointShape:true,
				        legend: {
							show:false
						},
				        xAxis: {
						  axisLine:false,
				          disableGrid: true,
						  fontColor:"#A6CDFF",
						  labelCount:5,
						  marginTop:5
				        },
				        yAxis: {
				          gridType: "solid",
						  gridColor:"#8EE3FF",
						  showTitle:true,
				          data: [
				            {
							 axisLine: false,
							title: "单位:元",
							titleFontColor:"#A6CDFF",
							fontColor:"#A6CDFF",
							titleOffsetY:-10
				            }
				          ]
				        },
				        extra: {
				          line: {
				            type: "curve",
				            width: 2,
				            activeType: "hollow",
				            linearType: "custom",
				            onShadow: true,
				            animation: "horizontal"
				          },
				        }
				      },
				opts3: {
				       // color: ["#1890FF"],
					   dataLabel:false,
				       padding: [30,10,15,10],
				       enableScroll: false,
					   show:true,
				       legend: {
						   show:false
					   },
				       xAxis: {
				         disableGrid: true,
						  fontColor:"#A6CDFF",
						  marginTop:5,
						  labelCount:5
				       },
				       yAxis: {
				        gridType: "solid",
				        gridColor:"#8EE3FF",
				        showTitle:true,
				        data: [
				          {
				        	axisLine: false,
				        	title: "单位:家",
				        	titleFontColor:"#A6CDFF",
				        	fontColor:"#A6CDFF",
							titleOffsetY:-10
				          }
				        ]
				       },
				       extra: {
				         column: {
				           type: "group",
				           width: 30,
						   categoryGap:2,
						   linearType:"custom",
						   customColor:["#17f6ff", "#0d78bb"],
						   colorStop:0.5,
				         },
				       }
				     },
					
			}
		},
		onReady() {
			this.getAreaList();
		    this.getLineData();
			this.getSaleAfter();
			this.getDataCount()
		  },
		methods:{
			checkType(){
				this.orderType=this.orderType===1?2:1
				let storeCount = {
				  areaId: this.getAreaId(),
				  startTime: this.start,
				  endTime: this.end,
				  type:1,
				  orderType: this.orderType
				}
				uni.$u.http.get('/home/getHomeSellInfo', {
					params: storeCount
				}).then(res => {
					console.log((res))
					this.getServerData3(res)
				})
			},
			getDataCount(){
				const params = {
				  areaId: this.getAreaId(),
				  startTime: this.start,
				  endTime: this.end
				};
				uni.$u.http.get('/home/getHomePageInfo',{params}).then(res => {
					console.log(res)
					this.dataCount=res
				})
			},
			getAreaList(){
				uni.$u.http.get('/areaLedger/areaList').then(res => {
					console.log(res)
					this.warehouseList=res
					this.columns[0]= res.map(item=>item.areaName)||[]
				})
			},
			getAreaId(){
				const item= this.warehouseList.find(item=>{
					if(item.areaName==this.warehouse){
						return item
					}
				})
				if(item){
					return item.area
				}else{
					return null
				}
			},
			search(){
				this.getLineData()
				this.getSaleAfter()
				this.getDataCount()
			},
			getSaleAfter() {
			      const params = {
			        areaId: this.getAreaId(),
			        startTime: this.start,
			        endTime: this.end
			      };
				  uni.$u.http.get('/home/getHomeAfterSaleInfo', {
				  	params
				  }).then(res => {
				  	console.log((res))
				  	 this.getServerData4(res);
				  })
			     
			    },
			 getLineData() {
			      // this.newStoreSales.xAxis[0].data = null;
			      // this.storeCount.xAxis.data = null;
			      // this.oldStoreSales.xAxis[0].data = null
			      // let myChart = echarts.init(document.getElementById('main'));
			      let newParams = {
			        areaId: this.getAreaId(),
			        startTime: this.start,
			        endTime: this.end,
			        orderType: 1
			      }
			      let oldParams = {
			        areaId: this.getAreaId(),
			        startTime: this.start,
			        endTime: this.end,
			        orderType: 2
			      }
			      let storeCountBytype = {
			        areaId: this.getAreaId(),
			        startTime: this.start,
			        endTime: this.end,
					type:1,
					orderType: this.orderType
			      }
				  let storeCount = {
				    areaId: this.getAreaId(),
				    startTime: this.start,
				    endTime: this.end,
				  }
				  uni.$u.http.get('/home/getHomeSellInfo', {
				  	params: newParams
				  }).then(res => {
					  console.log((res))
					  this.getServerData1(res)
				  })
				  
				  uni.$u.http.get('/home/getHomeSellInfo', {
				  	params: oldParams
				  }).then(res => {
				  	console.log((res))
				  	this.getServerData2(res)
				  })
				  
				  uni.$u.http.get('/home/getHomeSellInfo', {
				  	params: storeCountBytype
				  }).then(res => {
				  	console.log((res))
				  	this.getServerData3(res)
				  })
				  
				  uni.$u.http.get('/home/getHomeSellInfo', {
				  	params: storeCount
				  }).then(res => {
				  	console.log((res))
				  	this.getServerData5(res)
				  })
				  
			
			    },
			confirmStart(e){
				this.start=uni.$u.timeFormat(e.value, 'yyyy-mm-dd') 
				this.showStart=false
			},
			confirmEnd(e){
				this.end=uni.$u.timeFormat(e.value, 'yyyy-mm-dd') 
				this.showEnd=false
			},
			confirmWarehouse(e){
				console.log(e.value)
				this.warehouse=e.value
				this.showWarehouse=false
				this.getLineData()
				this.getSaleAfter()
				this.getDataCount()
			},
			
			getServerData1(res) {
				let listDate=[]
				if(res.listDate){
					 listDate=res.listDate.map(item=>item.split('-')[1]+'.'+item.split('-')[2])
				}
			      let data = {
			          categories: listDate,
			          series: [
			            {
			              name: "销售额",
			              linearColor: [
			                [
			                  0,
			                  "#1890FF"
			                ],
			                [
			                  0.25,
			                  "#00B5FF"
			                ],
			                [
			                  0.5,
			                  "#00D1ED"
			                ],
			                [
			                  0.75,
			                  "#00E6BB"
			                ],
			                [
			                  1,
			                  "#90F489"
			                ]
			              ],
			              setShadow: [
			                3,
			                8,
			                10,
			                "#1890FF"
			              ],
			              data: res.listOrderSellMoney||[]
			            }
			          ]
			        };
			      this.chartData1 = JSON.parse(JSON.stringify(data));
			    },
				getServerData2(res) {
					let listDate=[]
					if(res.listDate){
						 listDate=res.listDate.map(item=>item.split('-')[1]+'.'+item.split('-')[2])
					}
				      let data = {
				          categories: listDate,
				          series: [
				            {
				              name: "销售额",
				              linearColor: [
				                [
				                  0,
				                  "#1890FF"
				                ],
				                [
				                  0.25,
				                  "#00B5FF"
				                ],
				                [
				                  0.5,
				                  "#00D1ED"
				                ],
				                [
				                  0.75,
				                  "#00E6BB"
				                ],
				                [
				                  1,
				                  "#90F489"
				                ]
				              ],
				              setShadow: [
				                3,
				                8,
				                10,
				                "#1890FF"
				              ],
				              data: res.listOrderSellMoney||[]
				            }
				          ]
				        };
				      this.chartData2 = JSON.parse(JSON.stringify(data));
				    },
			getServerData3(res) {
				let listDate=['']
				if(res.listDate){
					 listDate=res.listDate.map(item=>item.split('-')[1]+'.'+item.split('-')[2])
				}
			      let data = {
			         categories: listDate,
			          series: [
			            {
			              name: "门店数量",
			              data: res.listOrderCount||[],
			            }
			          ]
			        };
			      this.chartData3 = JSON.parse(JSON.stringify(data));
			},
			getServerData5(res){
				let listDate=['']
				if(res.listDate){
					 listDate=res.listDate.map(item=>item.split('-')[1]+'.'+item.split('-')[2])
				}
				  let data = {
				     categories: listDate,
				      series: [
				        {
				          name: "门店数量",
				          data: res.listOrderCount||[],
				        }
				      ]
				    };
				  this.chartData5 = JSON.parse(JSON.stringify(data));
			},
			getServerData4(res) {
				let jsonArr = [];
				var keyArr = res.afterSaleType;
				var valueArr = res.afterSaleRatio;
				for (var i = 0; i < keyArr.length; i++) {
				var json = {};
				for (var j = 0; j < valueArr.length; j++) {
						if (i == j) {
							json.value = valueArr[j];
							json.name = keyArr[i];
							jsonArr.push(json);
						}
					}
				}
				let data = {
			          series: [
			            {
			              data: jsonArr,
						  textColor:'#90F489'
			            }
			          ]
			        };
			      this.chartData4 = JSON.parse(JSON.stringify(data));
			    },
			 
		}
	}
</script>
<style lang="scss" scoped>
	 .charts-box {
	   width: auto;
	    height: calc(100% - 80rpx);
	  }
	.floor{
		margin: 19rpx 24rpx;
		padding: 25rpx 22rpx;
		background-image: url("http://qiniuapplet.jiachuangnet.com/bg1.png");
		background-size: 100% 100%;
		background-repeat: repeat;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title{
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		border-bottom: 1rpx solid #00A2ED;
		line-height: 88rpx;
		position: relative;
		&::before{
			content: "";
			display: inline-block;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 126rpx;
			height: 8rpx;
			background: #00A2ED;
		}
	}
	.box{
		color: #fff;
		min-height: 100vh;
		width: 100vw;
		// background-color: #0b1428;
		background-image: url("http://qiniuapplet.jiachuangnet.com/bg.png");
		background-position: center;
		background-size: cover;
		overflow-y: auto;
	}
	.pick_date{
		height: 115rpx;
		
	}
	.search{
		width: 117rpx;
		height: 76rpx;
		background-image: url("http://qiniuapplet.jiachuangnet.com/btn-bg.png");
		background-size: cover;
		margin-left: 20rpx;
		text-align: center;
		line-height: 76rpx;
	} 
	 .btn-start,.btn-end{
		flex: 1;
		
	}
	::v-deep.btn-start,::v-deep.btn-end{
		.u-button{
			background-color: unset !important;
			border: 1rpx solid #17def4;
		}
		.u-button--plain{
			color: #fff !important;
		}
	}
	.pick_add{
		height: 91rpx;
	}
	
	.data_count{
		height: 413rpx;
		background-image: url("http://qiniuapplet.jiachuangnet.com/bg1.png");
	}
	.data_wrapper{
		margin-top: 13rpx;
		padding: 42rpx 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.data_item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 213rpx;
		height: 114rpx;
		margin-bottom: 13rpx;
		background-image: url("http://qiniuapplet.jiachuangnet.com/bg2-1.png");
		background-size: cover;
		.data_title{
			font-size: 20rpx;
			color: #FFFFFF;
		}
		.data_num{
			font-weight: 500;
			font-size: 30rpx;
			color: #19F5FF;
		}
	}
	
	.newOrderAmount{
		height: 527rpx;
		background-image: url("http://qiniuapplet.jiachuangnet.com/bg1.png");
	}
	
	
	.floor4{
		height: 1500rpx;
		background-size: 100% 100% !important;
	}
</style>
<style>
	
</style>